<template>
  <div style="height: 100%; overflow: hidden; width: 97%; margin-right: 3%">
    <div class="title">
      <img src="@/assets/images/title.png" alt="" />
      <p>大同村供电服务数字化自动驾驶</p>
    </div>
    <div class="introduction">
      <p>供电区域概况</p>
      <div v-for="(data, index) in generalData" :key="index" class="generalBox">
        <div class="pic" :style="data.boxShadow">
          <img :src="require('@/assets/pic2/' + data.key + '.png')" />
        </div>
        <span :style="data.color">{{ data.value }}</span>
        <span style="font-size: 200%; margin-left: 5px" :style="data.color">
          {{ data.unit }}</span
        >
        <p :style="data.color">{{ data.key }}</p>
      </div>
    </div>
    <div class="netManagement">
      <p>变压器列表</p>
      <transition name="buildingListFade">
        <div class="buildingList" v-show="buildingListShow">
          <div
            v-for="data in buildingDataList"
            :key="data.address"
            v-show="buildingDataListShow"
          >
            <div></div>
            <!-- <img src="@/assets/pic2/房屋.png" v-show="data.isInBuilding" /> -->
            <img src="@/assets/pic2/房屋.png" style="display: none" />
            <p style="text-align: center">
              {{ data.address }}
            </p>
            <span style="display: none">{{ data.fid }}</span>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import { onMounted, getCurrentInstance, ref } from "@vue/runtime-core";
import pubsub from "pubsub-js";
import transformerJSON from "@/json/变压器点位1130.json";
import buildingJSON from "@/json/大同村房屋面1128.json";
import netJSON from "@/json/大同村网格0803.json";
import keyArea from "@/json/大同村重点示范区.json";
import url from "@/components/URL.json";
import axios from "axios";
import { useRouter } from "vue-router";

export default {
  name: "leftContent",
  data: () => {
    return {
      isCutedByNet: false,
      netName: "",
      buildingListShow: true,
      buildingDataListShow: true,
      dialogVisible: false,
      // #1296db#f4ea2a#029032#0cd7e2#fa3531
      generalData: [
        {
          key: "楼栋数量",
          value: "2351",
          unit: "幢",
          color: "color:#1296db;",
          boxShadow: "box-shadow: 0px 0px 15px 2px #1296db;",
        },
        {
          key: "人口总数",
          value: "18874",
          unit: "人",
          color: "color:#f4ea2a;",
          boxShadow: "box-shadow: 0px 0px 15px 2px #f4ea2a;",
        },
        {
          key: "台区数量",
          value: "21",
          unit: "台",
          color: "color:#029032;",
          boxShadow: "    box-shadow: 0px 0px 15px 2px #029032;",
        },
        {
          key: "供电范围",
          value: "198.21",
          unit: "亩",
          color: "color:#fa3531;",
          boxShadow: "box-shadow: 0px 0px 15px 2px #fa3531;",
        },
        {
          key: "现状负荷",
          value: "8112",
          unit: "kW",
          color: "color:#0cd7e2;",
          boxShadow: "box-shadow: 0px 0px 15px 2px #0cd7e2;",
        },
        {
          key: "饱和负荷",
          value: "18522",
          unit: "kW",
          color: "color:#f63ee4;",
          boxShadow: "box-shadow: 0px 0px 15px 2px #f63ee4  ;",
        },
      ],
      buildingDataList: [],
      buildingAddressShowed: [],
      netDataList: [],
      resultShow: false,
      treeShow: false,
      hoverInBuilding: {},
      hoverOutBuilding: {},
      hoverSameBuilding: false,
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();
    const router = useRouter();
    let subList = [];
    const treeRef = ref(null);

    onMounted(() => {
      //读取概况数据
      // getOverall();
      //初始化网格化管理部分
      initNetManagement();
      // 消息订阅合集
      subscribeList();
      // 首页样式
      pubsub.publish("FirstPageShow", "@");
    });

    //从数据库读取poi信息
    function getPOI(table, poi) {
      axios({
        method: "get",
        url: url.basicURL + "groundFeatures",
        params: { db: table, poi: poi },
      }).then((res) => {
        console.log(res.data);
        pubsub.publish("POIshowOn", res.data);
      });
    }

    //读取概况数据
    function getOverall() {
      // 从后端统计人口相关的数据
      axios({
        method: "get",
        url: url.basicURL + "getOverall",
      }).then((res) => {
        // console.log(res.data);
        let peopleList = res.data;
        // 统计各项
        let womenCount = 0,
          menCount = 0,
          localCount = 0,
          outsideCount = 0;
        peopleList.forEach((people) => {
          if (people.SEX === "女") {
            womenCount++;
          } else {
            menCount++;
          }
          if (people.RYLX === "流动人口") {
            outsideCount++;
          } else {
            localCount++;
          }
        });
        // 填入data配置项中
        proxy.generalData[2].value = localCount;
        proxy.generalData[3].value = outsideCount;
        // proxy.generalData[4].value = menCount;
        // proxy.generalData[5].value = womenCount;
        // 读取当前节点中的值
        let generalBoxList = Array.from(
          document.querySelectorAll(".generalBox")
        );
        let nodeList = [];
        generalBoxList.forEach((element) => {
          nodeList.push(element.children[1]);
        });
      });
    }

    //初始化网格化管理部分
    function initNetManagement() {
      // 整理变压器名字
      let listIn = [];
      let listNotIn = [];
      transformerJSON.features.forEach((e) => {
        if (e.attributes.isInBuilding) {
          listIn.push({
            address: e.attributes["BYQMC"],
            fid: e.attributes.OBJECTID,
            isInBuilding: e.attributes.isInBuilding === 1,
          });
        } else {
          listNotIn.push({
            address: e.attributes["BYQMC"],
            fid: e.attributes.OBJECTID,
            isInBuilding: e.attributes.isInBuilding === 1,
          });
        }
      });
      // console.log(buildingAddressList);
      proxy.buildingDataList = [...listIn, ...listNotIn];
    }

    // 搜索结果点击事件
    function clickResult(target) {
      // 读取楼栋编号
      let num = "";
      if (target.children.length === 0) {
        num = Array.from(target.parentNode.children)[3].innerHTML;
      } else {
        num = Array.from(target.children)[3].innerHTML;
      }
      // 匹配楼栋
      buildingJSON.features.forEach((e) => {
        if (e.attributes["OBJECTID"] === Number(num)) {
          // 去除网格线
          pubsub.publish("netChange", { new: false });
          pubsub.publish("buildingSelected", e);
          router.push({
            path: "/buildingSelected",
          });
        }
      });
      // 匹配变压器
      transformerJSON.features.forEach((e) => {
        if (e.attributes["BYQMC"] === target.innerHTML) {
          pubsub.publish("transformerSelected", e);
          pubsub.publish("buildingSelected", e);
          router.push({
            path: "/buildingSelected",
          });
        }
      });
    }

    //消息订阅合集
    function subscribeList() {
      // 重置模型消息订阅
      subList[0] = pubsub.subscribe("needReturn", () => {
        // 获取元素
        let nodeList = Array.from(
          document.querySelectorAll(".buildingList>div")
        );
        nodeList.forEach((element) => {
          let address = Array.from(element.children)[0];
          address.innerHTML =
            address.innerHTML.split("✔") != -1
              ? address.innerHTML.split("✔")[0]
              : address.innerHTML;
        });
      });
    }

    //跳转至网格
    function toNet(netName) {
      proxy.dialogVisible = false;
      // 跳转
      router.push({
        path: "/netCut",
      });
      // 读取网格信息
      let net = {};
      netJSON.features.forEach((feature) => {
        if (feature.attributes.name === netName) {
          net = feature;
        }
      });
      console.log(net);
      //传值
      pubsub.publish("firstPageShowChange", false);
      setTimeout(() => {
        pubsub.publish("polygon", net);
      }, 500);
    }

    return {
      clickResult,
      subList,
      toNet,
    };
  },
  watch: {
    // 监听网格名字数据更新
    netDataList() {
      setTimeout(() => {
        // 监听元素点击
        let nodeList = Array.from(document.querySelectorAll(".netList>div"));
        nodeList.forEach((node) => {
          node.addEventListener("click", () => {
            // 移除其他兄弟元素的选中样式
            Array.from(event.target.parentNode.children).forEach((e) => {
              e.style["background"] = "rgba(255,255,255,0)";
              e.style["color"] = "white";
            });
            // 当前元素样式更新
            event.target.style["background"] = "#1296db";
            event.target.style["color"] = "white";
            // 更新楼栋展示列表
            this.buildingListShow = false;
            let net = event.target.innerHTML;
            setTimeout(() => {
              this.buildingDataListShow = true;
              this.buildingAddressShowed = [];
              this.buildingDataList.forEach((element) => {
                if (element.netName === net) {
                  element.buildingList.forEach((e) => {
                    // if (e.address === this.selectedAddress) e.address += "✔";
                    this.buildingAddressShowed.push(e);
                  });
                }
              });
              this.buildingListShow = true;
              // 绘制网格线
              pubsub.publish("netChange", { net: net, new: true });
            }, 300);
            //按网格线切割
            if (this.isCutedByNet) {
              this.toNet(net);
              // this.dialogVisible = true;
              pubsub.publish("cutByNet", net);
            }
          });
        });
      }, 500);
    },
    // 监听当前网格下属楼栋信息更新
    buildingDataList() {
      setTimeout(() => {
        // 获取元素
        let nodeList = Array.from(
          document.querySelectorAll(".buildingList>div>p")
        );
        // console.log(nodeList);
        // 添加样式与事件
        nodeList.forEach((node) => {
          // console.log(node.innerHTML);
          // 添加点击效果
          node.addEventListener("click", () => {
            // 选择楼栋
            let eventNode =
              event.target.tagName != "SPAN"
                ? event.target
                : event.target.parentNode;
            this.clickResult(eventNode);
          });

          // 添加hover效果
          node.addEventListener("mousemove", () => {
            // 仅记录hover新楼栋
            this.hoverInBuilding = event.target;
          });

          node.addEventListener("mouseout", () => {
            // 清除高亮
            // this.hoverOutBuilding = event.target;
          });
        });
      }, 500);
    },
    hoverInBuilding(newvalue, oldvalue) {
      // 读取FID
      let num = Array.from(newvalue.parentNode.children)[2].innerHTML;
      // 匹配楼栋
      transformerJSON.features.forEach((e) => {
        if (e.attributes["FID"] === Number(num)) {
          pubsub.publish("hoverBuildingIn", e);
        }
      });
    },
    hoverOutBuilding() {
      pubsub.publish("hoverBuildingOut");
    },
  },
  beforeDestroy() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
  beforeRouteLeave() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
};
</script>

<style lang="less" scoped>
.layerList {
  // height: 1000px;
  position: relative;
  top: 6%;
  display: block;
}

.polygonIcon {
  background-color: transparent;
  width: 20px;
  height: 20px;
  margin-bottom: 1px;
  // border: #1296db 2.5px solid;
  margin-left: 2.5%;
  border-radius: 15%;
  color: transparent;
}

.polyLineIcon {
  // background-color: #1296db;
  border: transparent;
  width: 30px;
  height: 3px;
  margin-bottom: 5px;
  margin-left: 5%;
  color: transparent;
}

.title {
  // background-image: linear-gradient(
  //   to right,
  //   rgba(6, 19, 31, 1),
  //   rgba(6, 19, 31, 0.2) 95%,
  //   rgba(6, 19, 31, 0)
  // );
  height: 6%;
  width: 100%;
  position: relative;
  z-index: 999;
  text-align: center;
  float: left;
  > img {
    width: 10%;
    position: absolute;
    top: 25%;
    left: 0.5%;
  }
  > p {
    color: white;
    font-size: 180%;
    font-weight: bolder;
    padding-top: 20px;
    padding-left: 7%;
  }
}
.introduction {
  height: 30%;
  // text-align: center;
  > p {
    width: 60%;
    background-image: ~"url(@{app-images-root}/topmenu_bg.png)";
    background-size: 100% 100%;
    height: 15%;
    font-size: 150%;
    font-weight: bold;
    text-align: center;
    padding-top: 3%;
    color: white;
    float: left;
    position: relative;
    left: -10%;
  }
  > .generalBox {
    // border: #1296db 1px solid;
    display: inline-block;
    width: 48%;
    height: 55%;
    position: relative;
    margin: 0% 0.5%;
    text-align: center;
    top: -5%;
    > .pic {
      border-radius: 50%;
      width: 60px;
      height: 60px;
      background-color: white;
      position: relative;
      bottom: -50%;
      text-align: left;
      > img {
        width: 70%;
        position: relative;
        left: 15%;
        top: 15%;
      }
    }
    > span {
      // color: white;
      font-size: 550%;
      font-weight: bold;
      position: relative;
      top: -25%;
      left: 1%;
      font-family: "Agency FB";
    }
    > p {
      font-family: "HGBTH_CNKI";
      color: white;
      text-align: right;
      position: relative;
      top: -27%;
      left: 2%;
      font-size: 225%;
      // font-weight: bold;
      letter-spacing: 3px;
    }
  }
}

.generalBox:nth-child(odd) {
  margin-left: 2%;
}

.generalBox:nth-child(n + 4) {
  // background-color: #1296db;
  top: -22%;
}

.generalBox:nth-child(n + 6) {
  // background-color: #1296db;
  top: -37%;
}

.netManagement {
  // display: none;
  // overflow: hidden;
  // background-color: #1296db;
  height: 50%;
  text-align: center;
  position: relative;
  top: 17%;
  > p {
    width: 60%;
    background-image: ~"url(@{app-images-root}/topmenu_bg.png)";
    background-size: 100% 100%;
    height: 8%;
    font-size: 150%;
    font-weight: bold;
    text-align: center;
    padding-top: 3%;
    margin-left: -10%;
    color: white;
    float: left;
    position: relative;
    // bottom: 1%;
  }
  > .netList {
    display: block;
    // border: #1296db 1px solid;
    // background-color: rgba(255, 255, 255, 0.92);
    border-right: #1296db 1px solid;
    width: 38%;
    height: 100%;
    position: absolute;
    z-index: 10;
    left: 2%;
    text-align: center;
    > div {
      // color: #1296db;
      color: white;
      height: 4%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 110%;
      font-weight: bold;
    }
    > div:first-child {
      height: 5%;
      border-bottom: #1296db 2px solid;
    }
    > div:nth-child(2) {
      background-color: #1296db;
      color: white;
    }
  }
  > .buildingList {
    display: inline-block;
    // border: #1296db 1px solid;
    width: 98%;
    height: 100%;
    // background-color: #1296db;
    max-height: 93%;
    overflow-y: scroll;
    position: relative;
    z-index: 9;

    > div {
      // padding-left: 2%;
      color: white;
      height: 60px;
      font-size: 120%;
      font-weight: bold;
      display: flex;
      justify-content: left;
      align-items: center;
      // border-bottom: rgb(148, 151, 154) 1px dashed;
      border-bottom: 1px solid;
      border-image: linear-gradient(to right, #fff, #0000);
      border-image-slice: 1;
      // border-bottom: rgba(18, 150, 219, 0.4) 1px dashed;
      > div {
        background-color: #1296db;
        margin-right: 5px;
        width: 5px;
        height: 40%;
        border-radius: 15px;
      }
    }
  }
}

.buildingList > div > img {
  // display: none;
  width: 7%;
  margin-right: 5px;
}

.buildingList > div > p:hover {
  text-shadow: 0 0 15px yellow;
}

.buildingListFade-enter-active {
  transition: all 0.3s ease-out;
}

.buildingListFade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.3, 1);
  transform: translateX(20%);
}

.buildingListFade-enter-from,
.buildingListFade-leave-to {
  transition: 0.3s;
  transform: translateX(20%);
  opacity: 0;
}

.resultList::-webkit-scrollbar,
.buildingList::-webkit-scrollbar {
  width: 3px;
}

.resultList::-webkit-scrollbar-thumb,
.buildingList::-webkit-scrollbar-thumb {
  height: 25px;
  background: white;
  border-radius: 15px;
}

.resultList::-webkit-scrollbar-track,
.buildingList::-webkit-scrollbar-track {
  background: transparent;
}
</style>